<template>
	<view class="box">
		<form @submit="formSubmit">
			<view>
				<uni-search-bar></uni-search-bar>
			</view>

			<view class="box2">
				<span>学校：</span>
				<view class="box1-item">
					<span>
						<uni-data-select v-model="value" :localdata="range" @change="change" placeholder="请选择">
						</uni-data-select>
					</span>
				</view>
			</view>


			<view class="box2">
				<span>专业：</span>
				<view class="box1-item">
					<span>
						<uni-data-select v-model="value2" :localdata="range1" @change="change1" placeholder="请选择">
						</uni-data-select>
						</select-lay>
					</span>
				</view>
			</view>


			<view class="box2">
				<span>类别：</span>
				<view class="box1-item">
					<span>
						<uni-data-select v-model="value3" :localdata="range2" @change="change2" placeholder="请选择">
						</uni-data-select>
						</select-lay>
					</span>
				</view>
			</view>

			<view class="box2">
				<span>队伍：</span>
				<view class="box1-item">
					<span>
						<uni-data-select v-model="value4" :localdata="range3" @change="change3" placeholder="请选择">
						</uni-data-select>
					</span>
				</view>
			</view>
			<button class="btn" @bb="submit">保存</button>
		</form>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: "",
				value2: "",
				value3: "",
				value4: "",
				range: [{
						value: 0,
						text: "山东交通职业学院"
					},

				],
				range1: [{
						value: 0,
						text: "计算机应用技术专业"
					},
					{
						value: 1,
						text: "高速铁路客运"
					},
					{
						value: 2,
						text: "空中乘务"
					},
					{
						value: 3,
						text: "国际邮轮乘务"
					},
					{
						value: 4,
						text: "汽车检测与维修"
					},
					{
						value: 5,
						text: "机械制造与自动化"
					},
					{
						value: 6,
						text: "道路桥梁工程"
					},
					{
						value: 7,
						text: "物流工程技术"
					},
				],
				range2: [{
						value: 0,
						text: "在校生"
					},
					{
						value: 1,
						text: "毕业生"
					}
				],
				range3: [{
						value: 0,
						text: "一队"
					},
					{
						value: 1,
						text: "二队"
					},
					{
						value: 2,
						text: "三队"
					},
				],
			}
		},

		methods: {
			// formSubmit(e) {
			// 	console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
			// },
			change(e) {
				console.log(this.range[e].text);
			},
			change1(e) {
				console.log(this.range1[e].text);
			},

			change2(e) {
				console.log(this.range2[e].text);
			},
			change3(e) {
				console.log(this.range3[e].text);
			},
			// submit(e) {},
		}

	}
</script>
<style scoped lang="less">
	.box {
		margin: 30rpx;
	}

	.box1 {}

	.box2 {
		display: flex;
		line-height: 100rpx;
		height: 100rpx;


	}

	.box1-item image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 10%;
		margin-top: 30rpx;
		margin-right: 20rpx;
	}

	.box1-item {
		display: flex;
		justify-content: space-between;
	}

	.box1-item span {
		padding-right: 18rpx;
		font-size: 55rpx;

	}

	.box1-item span input {
		margin-top: 20rpx;
		padding-left: 15rpx;
		font-size: 25rpx;
		color: gray;
		border: 1px gray solid;
		width: 250rpx;
	}

	/deep/.uni-select {
		margin-top: 20rpx;
		width: 400rpx;
		margin-left: 10rpx;
		height: 60rpx;
	}

	.btn {
		margin-top: 80rpx;
		color: white;
		width: 50%;
		background-color: red;
	}

	/deep/.uni-searchbar__box {
		border: 1px gainsboro solid
	}
</style>
